<template>
  <div>
    <h2>toRef</h2>
    <p>
      把一个响应式对象（通常是reactive包装的对象）中的某个属性进行响应式包装
      如果获取值得时候，需要使用.value
    </p>
    <p>
      name:
      <input type="text" v-model="formData.name" />
      {{ formData.name }}
    </p>
    <p>
      age: <input type="text" v-model="formData.age" />
      {{ formData.age }}
    </p>
    <p>
      age（toRef）: <input type="text" v-model="age" />
      {{ age }}
    </p>
    <p>
      name（toRef）: <input type="text" v-model="name" />
      {{ name }}
      注意：toRef不能对普通对象进行包装，包装后没有响应式效果
    </p>
  </div>
</template>
    
    <script lang="ts">
import { reactive, toRef } from "vue";

export default {
  setup() {
    const formData = reactive({
      name: "hydra",
      age: 35,
    });

    const age = toRef(formData, "age");

    const people = {name: "陈仁杰"};
    const name = toRef(people,"name");

    return {
      age,
      formData,
      name
    };
  },
};
</script>
    
    <style scoped>
</style>